<template>
  <el-dialog
    title="权限设置"
    width="50%"
    :visible.sync="visible"
    @close="$emit('update:showpermiModal', false)"
    :show="showpermiModal"
  >
    <div>
      <h4 class="permissions_title">角色信息</h4>
      <el-row>
        <el-col :span="24">
          渠道号:
        </el-col>
        <el-col :span="24">
          渠道名称:
        </el-col>
      </el-row>
    </div>
    <div>
      <h4 class="permissions_title">选择权限</h4>
      <el-tree
        default-expand-all
        :data="data"
        show-checkbox
        node-key="id"
        >
      </el-tree>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="close('updateUser')">取 消</el-button>
    <el-button type="primary" @click="sure('updateUser')">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
  export default {
    name: 'Permissions',
    props: {
      showpermiModal: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      showpermiModal: function () {
        this.visible = this.showpermiModal
      }
    },
    data: function() {
      return {
        visible: this.showpermiModal,
        data: [{
          id: 1,
          label: '一级 2',
          children: [{
            id: 3,
            label: '二级 2-1',
            children: [{
              id: 4,
              label: '三级 3-1-1'
            }, {
              id: 5,
              label: '三级 3-1-2'
            }]
          }, {
            id: 2,
            label: '二级 2-2',
            children: [{
              id: 6,
              label: '三级 3-2-1'
            }, {
              id: 7,
              label: '三级 3-2-2'
            }]
          }]
        }]
      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  .permissions_title{
    color:#409EFF;
    padding: 5px 0;
  }
</style>
